<template>
    <div >
      <div>amis 预览:</div> 
      <div style="text-align: center; ">
      <AmisRenderer :amisjson="amisjson"></AmisRenderer>
      </div>
<hr/>
<div>amis json:</div>
<div style="text-align: center; ">
      <textarea style="width:70%;height:500px"
        v-model="inputJson" 
        placeholder-class="textarea-placeholder"
     
        @blur="textareaBlur"
      />
    </div>
  </div>
  </template>
  
  <script>   
  import "./registerRenderer.js"
  import AmisRenderer from "../components/AmisRenderer.vue"  
  export default {    
    data() {
      return {
        amisjson: null,
        inputJson:null,
        formData: {},
      }
    },
    components:{
      AmisRenderer
    },created(){
  //因为app.vue注册amis组件时间问题，这里延迟500ms

   setTimeout(x=>{
        
    this.amisjson = {
        type: 'page',
        body: [{
          type: 'tpl',
          tpl: 'hello tpl'
        },
        {
          "type": "vue-info-card",
          "label": "vue-info-card",
          "name": "vue-info-card",
          "body": [
            {
              "type": "tpl",
              "tpl": "自定义容器区",
              "inline": false,
              "id": "u:7573f2c3d676"
            }
          ],
          "id": "u:fa2f38bfa5d4",
          "title": "amis 是一个低代码前端框架",
          "backgroundImage": "https://search-operate.cdn.bcebos.com/64c279f23794a831f9a8e7a4e0b722dd.jpg",
          "img_count": 3,
          "comment_count": 2021
        }
        ]
      }
  this.inputJson = JSON.stringify(this.amisjson );
       },500)
       
  
    },methods:{
     
      textareaBlur:function(){
        this.amisjson = JSON.parse(this.inputJson);
      }
    }
  }
  </script>
  